<template>

  <div>
    <div style="display: flex; align-items: center; justify-content: space-between">
      <h3>综合统计</h3>
      <el-button type="primary" size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
    </div>
    <el-table
      :data="dataList"
      border
      stripe
      style="width: 100%">
      <el-table-column
        prop="sort"
        label="排名"/>
      <el-table-column
        prop="realName"
        label="姓名"/>
      <el-table-column
        prop="deptName"
        label="所在部门"/>

      <el-table-column
        v-for="item in examList"
        :key="item.id"
        :label="item.title">
        <template v-slot="scope">
          <span v-if="scope.row[`exam_${item.id}`]">
            {{ scope.row[`exam_${item.id}`] }}
          </span>
          <span v-else> - </span>
        </template>

      </el-table-column>

      <el-table-column
        prop="totalScore"
        width="120px"
        label="总分"/>

      <el-table-column
        align="center"
        width="120px"
        label="通过情况">
        <template v-slot="scope">
          <span :class="scope.row.passed==='通过'?'pass':'fail'">
            {{ scope.row.passed }}
          </span>
        </template>
      </el-table-column>

    </el-table>

  </div>

</template>

<script>

import { statTotalScore, statTotalScoreExport } from '@/api/stat/exam'
import { listTitles } from '@/api/exam/exam'

export default {
  name: 'ExamStatTotalScore',
  props: {
    data: Object
  },
  data() {
    return {
      examList: [],
      dataList: []
    }
  },
  watch: {
    data: {
      handler() {
        this.fetchData()
      }
    }
  },

  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 获得考试标题
      listTitles({ ids: this.data.examIds }).then(res => {
        this.examList = res.data

        // 加载统计数据
        statTotalScore(this.data).then(res => {
          this.dataList = res.data
        })
      })
    },

    // 导出数据
    handleExport() {
      statTotalScoreExport(this.data)
    }
  }
}
</script>

<style scoped>
.pass {
  color: #1aac1a
}

.fail {
  color: #ff0000;
}

</style>
